$base-font-size: 14px;

@mixin responsive-font {
  font-size: $base-font-size;

  @media (min-width: 480px) {
    font-size: ($base-font-size * 1.2);
  }

  @media (min-width: 768px) {
    font-size: ($base-font-size * 1.4);
  }

  @media (min-width: 992px) {
    font-size: ($base-font-size * 1.6);
  }

  @media (min-width: 1200px) {
    font-size: ($base-font-size * 1.8);
  }
}